<template>
  <div :class="[node.type === 'TRIGGER' ? 'node-wrap-box node_sid-startevent start-node' : 'node-wrap-box']">
    <div>
      <div class="title" :style="titlebg">
        <span class="editable-title">{{ nodetype }}</span>
        <a-popconfirm
          ok-text="确定"
          cancel-text="取消"
          @confirm="confirm"
        >
          <div slot="title" style="padding:0 10px">确认删除么？</div>
          <a-icon v-show="node.type !== 'TRIGGER'" type="close" class="anticon anticon-close close" />
        </a-popconfirm>
      </div>
      <div class="content" @click="dialog = true">
        <div class="text">
          {{ content }}
        </div>
        <a-icon type="right" class="anticon anticon-right arrow"/>
      </div>
    </div>
    <worksheet-trigger
      v-if="node.type === 'TRIGGER'"
      :dialog.sync="dialog"
      :node="node"
      @setProperties="setStartProperties"
    />
    <worksheet-action
      v-if="node.type === 'ACTION'"
      :dialog.sync="dialog"
      :node="node"
      @setProperties="setProperties"
    />
  </div>
</template>
<script>
import WorksheetTrigger from '../drawer/worksheetTrigger.vue'
import WorksheetAction from '../drawer/worksheetAction.vue'
export default {
  name: 'NodeWrapBox',
  components: {
    WorksheetTrigger,
    WorksheetAction,
  },
  props: {
    node: {
      type: Object,
      default: Object
    }
  },
  data: () => ({
    dialog: false,
    text: '请选择',
    titlebg: 'background: rgb(255, 148, 62)',
    nodetype: '工作表触发',
    content: '选择触发方式',
  }),
  mounted () {
    this.setText()
  },
  methods: {
    confirm(e) {
      this.$emit('delNode')
    },
    addApprover () {
      this.dialog = true
    },
    setProperties (properties) {
      console.log("set properties")
      this.node = Object.assign(this.node, JSON.parse(JSON.stringify(properties)))
      this.setText()
      this.$emit('save', false)

    },
    setStartProperties (trigger) {
      this.node = Object.assign(this.node, JSON.parse(JSON.stringify(trigger)))
      this.setText()
      this.$emit('save', false)
    },
    setText () {
      switch (this.node.type) {
        case 'TRIGGER':
          this.content = (this.node.name && this.node.name !== '工作流程') ? this.node.name :'选择触发方式'
          this.nodetype = '工作表触发'
          break
        case 'ACTION':
          this.content = (this.node.name && this.node.name !== '') ? this.node.name : '设置此节点'
          this.nodetype = '动作'
          break
        default:
      }
    }
  }
}
</script>
